<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品已过期优惠券</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 1150px;
        }
        .list{
            width: 1650px;
            height: 50px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }
        .list-left{
            width: 100px;
            height: 30px;
            margin-top: 10px;
            float: left;
        }
        .list-left-left{
            width: 10px;
            height: 30px;
            float: left;
            background: green;
        }
        .list-left-right{
            width: 80px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            float: left;
            text-indent: 5px;
        }
        .list-right{
            float: right;
            margin-top: 5px;
            margin-right: 45px;
        }
        .query{
            width: 1650px;
            height: 100px;
            margin-top: 20px;
        }
        .layui-col-md11{
            width: 100%;
        }
        .layui-card-header{
            margin-left: 20px;
            width: 1620px;
            background-color:rgb(243,243,243);
        }
        .query-top-right{
            float: right;
            margin-right: 30px;
        }
        .layui-form-label{
            margin-left: 170px;
            width: 100px;
        }
        .layui-form-item .layui-input-inline {
            float: left;
            width: 250px;
            margin-right: 80px;
        }
        .record{
            width: 1650px;
            height: 700px;
            margin-top: 40px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }

        .record-right{
            width: 1650px;
            height: 700px;
            float: left;
        }
        /*设置数据表格的单元格样式*/
        .layui-table-cell {
            line-height: 50px;
            height: inherit;
        }
        .layui-table-cell>a{
            color:green;
        }

    </style>
</head>
<body>
<div id="app" class="box">
    <!--商品列表-->
    <div class="list">
        <div class="list-left">
            <div class="list-left-left"></div>
            <p class="list-left-right">优惠券查询</p>
        </div>
        <div class="list-right">
            <div class="list-right-left layui-btn layui-icon layui-icon-refresh" id="Refresh">&nbsp;刷新</div>
            <div class="list-right-right layui-btn layui-icon layui-icon-left" id="goBack">&nbsp;返回</div>
        </div>
    </div>

    <!--筛选查询-->
    <div class="layui-row query">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe615;</i>
                    筛选查询
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="layForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户账号：</label>
                            <div class="layui-input-inline">
                                <input placeholder="优惠券名称" name="account" class="layui-input" id="account"/>
                            </div>
                            <label class="layui-form-label">用户名称：</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="nickname" placeholder="请输入需要查询的用户名称" id="nickname" type="text"/>
                                <input class="layui-input" name="userId" placeholder="用户id" id="userId" type="hidden"/>
                            </div>
                            <span style="float: right;margin-right: 10px">
                                <button type="button" id="search" class="layui-btn">
                                    <i class="layui-icon layui-icon-search" ></i> 搜索
                                </button>
                                <button type="reset"  class="layui-btn layui-btn-warm">
                                    <i class="layui-icon layui-icon-refresh-3"></i> 重置
                                </button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--数据列表-->
    <div class="record">

        <div class="record-right">
            <table lay-filter="expiredTable" id="expiredTable"></table>
        </div>
    </div>
    <!--表头样式-->
    <div id="toolbarFunction" hidden class="layui-row" lay-filter="toolbarFunction">
        <div style="float: left;">
            <i class="layui-icon layui-icon-tabs"></i>数据列表
        </div>
    </div>
    <div id="toolFunction" lay-filter="toolFunction" hidden>
        <span style="margin: 0px 15px" lay-event="toolCouponGive">赠送优惠券</span>

    </div>
    <!-- 返回 -->
    <p id="title" style="display: none;">过期优惠券查询</p>
</div>
</body>

<script>
    layui.use(["layer","table","jquery"],function () {
        var layer = layui.layer,
            table = layui.table,
            $ = layui.jquery;
        var param = {
            'account':"",
            'nickname':''
        }
        getAllexpired(param);
        //返回
        $('#goBack').click(function () {
            var title = $('#title').text();
            var iframe = parent.$('.iframe');
            $.each(iframe,function (i,item) {
                if(title == $(item).attr('_href')){
                    parent.$('#beforeHref').val($(item).attr('_href'));
                    parent.beforeHref();
                    return;
                }
            });
        });
        //刷新
        $("#Refresh").click(function () {
            location.reload();
        });
        $("#search").click(function () {
            var account = $("#account").val();
            var nickname = $("#nickname").val();
            var param = {
                'account':account,
                'nickname':nickname
            }
            getAllexpired(param);
        });
        function getAllexpired(param){
            $.ajax({
                url:'/JsUserCouponUsed/getAllstateExpired',
                data:param,
                type:'post',
                dataType:'json',
                success:function (data) {
                    expired(data.data);
                }
            })
        }
        function expired(data) {
            table.render({
                elem:'#expiredTable',
                data:data,
                cols:[[
                    {field:"userId",title:"用户Id",align:"center"},
                    {field:"account",title:"用户账号",align:"center"},
                    {field:"nickname",title:"用户昵称",align:"center"},
                    {field:"couponName",title:"优惠券名称",align:"center"},
                    {field:"couponPrice",title:"优惠券金额",align:"center"},
                    {field:"startDate",title:"开始时间",align:"center"},
                    {field:"endDate",title:"过期时间",align:"center"}
                ]],
                page:true
            });
        }
    })
    </script>
</html>